<template>
  <div
    class="datatable"
    :style="{
      height: '100%',
      fontSize: datatablefontSize,
      padding: datatablepa,
    }"
  >
    <div style="height: 100%; display: flex; flex-direction: column">
      <!-- header -->
      <div class="dth" :style="headerstyle">
        <div
          v-for="eh in header"
          :style="{ flex: eh.flex, color: '#53F3F3' }"
          class="tbhcol"
        >
          <div>
            <!-- 每个字符串 -->
            <div
              v-html="eh.name"
              :class="{
                tbhrowsingle: eh.children && eh.children.length ? true : false,
                fwwccwh: true,
              }"
              :style="{
                textAlign: 'center',
              }"
            ></div>
          </div>
          <div v-if="eh.children && eh.children.length">
            <div class="tbhrow">
              <!-- 每个字符串 -->
              <div
                v-for="ehi in eh.children"
                class="fwwccwh"
                :style="{
                  textAlign: 'center',
                }"
              >
                <div v-html="ehi.name"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- content -->
      <div style="height: 100%; position: relative; color: white">
        <div style="height: 100%; position: absolute" :id="smid"></div>

        <vue-seamless-scroll
          :data="datalist"
          :style="{ height: smh, overflow: 'hidden' }"
          v-if="ifsm"
          class="smdiv"
          :class-option="optionSingleHeightTime"
        >
          <div
            class="eachrowtb"
            v-for="(item, index) in datalist"
            :style="{
              display: 'flex',
              width: '100%',
              backgroundColor: index % 2 == 0 ? '#1E233Cff' : '#040A20ff',
            }"
          >
            <div
              v-for="(er, index1) in item"
              :style="{
                flex: getflex(index1),
                padding: colpa,
                backgroundColor: getbc(index1),
                textAlign: getnamealign(nametype, index1),
                fontSize: getcontentfont(contentfont, index1),
              }"
              class="smrc fwwccwh"
              :id="smrcid"
            >
              <div v-html="er" style="width: 100%;"></div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamless from "vue-seamless-scroll";
import uuidv1 from "uuid/v1";

import commonmixins from "@/mixins/bigScreen/commonmixinsdt";

export default {
  mixins: [commonmixins],
  name: "commondatatable",
  props: {
    header: {
      type: Array,
      default: [],
    },
    datalist: {
      type: Array,
      default: [],
    },
    coltype: {
      type: String,
      default: "",
    },
    nametype: {
      type: String,
      default: "",
    },
    contentfont: {
      type: String,
      default: "",
    },
    dtscrolle: {
      type: Number,
      default: 0.1
    }
  },
  components: {},
  created() {
    this.smid = _.random(1, 20) + "aaa";
    this.smrcid = _.random(1, 20) + "bbb";
    this.componentDetail = this.$parent.componentDetail
  },
  data() {
    return {
      componentDetail: {},
      smid: "",
      smh: "100px",
      ifsm: true,
      colpa: "0px 0px",
      smrcidh: 40,
      smrcid: "",
      datatablefontSize: "40px",
      datatablefontSizecol: "50px",
      rwpa: "15px",
      datatablepa: "10px",
      headerstyle: {
        width: "100%",
        color: "white",
        height: "120px",
      },
      limitMoveNum: 100
    };
  },
  computed: {
    optionSingleHeightTime() {
      return {
        //每行的高度
        singleHeight: this.smrcidh,
        // singleHeight: this.smrcidh / this.datalist.length,
        // waitTime: 2000,
        //滚动速度
        // step: 0,
        step: this.dtscrolle,
        // limitMoveNum: this.limitMoveNum
      };
    },
  },
  watch: {
    header: {
      handler: function (n, o) {
        let scale = this.$root.setting.scale;
        let h = 120;
        this.header.map((item) => {
          if (item.children && item.children.length != 0) {
            h = 160;
          }
        });
        this.headerstyle.height = this.getscalepx(h/3.4)
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    this.datatablefontSize = this.getscalepx(40/3.4)
    this.rwpa = this.getscalepx(15/3.4)
    this.colpa = this.getscalepx(20/3.4) + " 0px";
    this.datatablepa = "0px " + "0px " + this.getscalepx(20/3.4) + "0px";

    // setTimeout(() => {
    //   let aaa = document.getElementById(this.smid);
    //   if (!aaa.offsetHeight) {
    //     return;
    //   }
    //   if (aaa.offsetHeight == null) {
    //     return;
    //   }
    //   //获取table高度
    //   this.smh = aaa.offsetHeight + "px";
    //   this.limitMoveNum = (aaa.offsetHeight/ this.getscalepxcnum((40/3.4 + 2*20/3.4))).toFixed(0)
      
    // }, 5000);

    //设置高度
    this.$nextTick(function () {
      let aaa = document.getElementById(this.smid);
      if (!aaa.offsetHeight) {
        return;
      }
      if (aaa.offsetHeight == null) {
        return;
      }
      //获取table高度
      this.smh = aaa.offsetHeight + "px";

      this.ifsm = false;
      this.$nextTick(function () {
        this.ifsm = true;
        this.$nextTick(function () {
          this.limitMoveNum = (aaa.offsetHeight/ this.getscalepxcnum((40/3.4 + 2*20/3.4))).toFixed(0)
        });
      });
    });
  },
  methods: {
    getnamealign(nametype,index){
      if (nametype != '' && index == 0) {
        return nametype
      }else{
        return 'center'
      }
    },
    getcontentfont(contentfont,index){
      if (contentfont != '' && index != 0) {
        return contentfont
      }else{
        return this.datatablefontSize
      }
    },
    getbc(index) {
      if (this.coltype == "") {
        return;
      }
      switch (index) {
        case 0:
          return false;
          break;
        case 1:
        case 2:
          return "#3C312299";
          break;
        case 3:
        case 4:
          return "#2D371D99";
          break;
        case 5:
        case 6:
          return "#19401F99";
          break;

        default:
          break;
      }
    },
    getflex(index) {
      // return function (index) {
      let aaa = [];
      this.header.map((item) => {
        if (item.children && item.children.length) {
          item.children.map((itemt) => {
            aaa.push(itemt.flex);
          });
        } else {
          aaa.push(item.flex);
        }
      });
      return aaa[index];
      // };
    },
  },
};
</script>
<style lang='scss' scoped>
.datatable {
  // padding: 10px;
}
.smrc {
}
.smdiv {
  position: absolute;
  width: 100%;
}
.dth {
  display: flex;
  width: 100%;
  background-color: #06335a;
  .tbhcol {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    .tbhcolpa {
      // padding: ;
    }

    .tbhrowsingle {
      border-left: 1px solid #373d5b;
    }

    .tbhrow {
      display: flex;
      flex-direction: row;
      border-top: 1px solid #373d5b;
      border-left: 1px solid #373d5b;
    }
  }
}
</style>